<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{width:300px;height:300px;border: solid 1px black;overflow:auto;}
        .cont div{margin: 4px;padding: 4px;border-radius: 4px;max-width: 200px;color: #fff;clear: both;}
        .cont div:nth-child(2n){background: #393;float: left;}
        .cont div:nth-child(2n-1){background: #939;float:right;}
    </style>
</head>
<body>
    <div class="cont">
    </div>
    <input type="text" id="txt">
    <input type="button" id="btn" value="发送">
</body>
<script>

    var cont = document.querySelector(".cont");
    var txt = document.querySelector("#txt");
    var send = document.querySelector("#btn");

    send.onclick = function(){
        sendMsg();
    }

    txt.onkeydown = function(eve){
        var e = eve || window.event;
        var code = e.keyCode || e.which;
        // 回车发送
        // if(code === 13){
        // ctrl+回车发送
        if(code === 13 && e.ctrlKey){
            sendMsg();
        }
    }


    function sendMsg(){
        var div = document.createElement("div");
        div.innerText = txt.value;
        cont.appendChild(div);
        txt.value = "";

        // 将滚动条绝对的设置到最底部
        cont.scrollTop = cont.scrollHeight;
    }

    
</script>
</html>